<?php 
$pictureList = new PictureList();
$pictureList = $pictureList->getBoughtByAccountId(Session::get('account_id'));

$chip = new Chip();
$chip = $chip->get(Session::get('chip_id'));
?>
<style>
.picture{
	overflow:hidden;
	position:relative;
	height:300px;
	margin-bottom:25px;
}
.overlay{
    bottom: 10px;
    height: 32px;
    left: 10px;
    opacity: 0.8;
    position: absolute;
    width: 30px;
}
.overlay a{
	display: block;
    float: left;
	color:#482800;
    padding: 5px 0;
    position: relative;
    text-align: center;
    width: 30px;
	border:1px solid #482800;
	text-decoration:none;
}
.picture img{
	height:100%;
	width:auto;
}
.border{
	opacity:1 !important;
}
.box.brown{
	background:#eedbb1;
}
.box.brown dl{
	padding:20px;
	text-transform:uppercase;
}
.box.brown dt{
	font-weight:bold;
}
.vergroten{
	text-indent:-9999px;
	background:#d9bc96 url('../img/icons/foto_vergroten.png') no-repeat !important;
}
.toevoegen{
	text-indent:25px;
	width:130px !important;
	margin-left:5px;
	background:#d9bc96 url('../img/icons/foto_toevoegen.png') no-repeat !important;
}
</style>
	<div class="row">
		<div class="twelvecol box red last">
			<div class="outer_wrapper rounded">
				<div class="wrapper">
					<div class="top_nav">
						<button class="twocol" onClick="javascript: history.go(-1)">Terug</button>
						<h2>Fotoservice</h2>
					</div>
				</div>
			</div>
		</div>
		
		<div class="twelvecol box">
			<h2>Gekochte foto's</h2>
			<p class="margin-bottom">Uw foto's kunt u ophalen bij de fotoservice wanneer u het park verlaat.</p>
		</div>
		

	<?php for($i=0; $i < count($pictureList); $i++){?>
		<div class="fourcol<?php echo ($i%3 == 1 ? " last" : "")?> picture" data-id="<?php echo $pictureList[$i]->id?>">
			<img src="<?php echo URL . 'img/user_pictures/' . $pictureList[$i]->picture; ?>" />
			<div class="overlay">
				<a href="<?php echo URL ?>fotoservice/foto/<?php echo $pictureList[$i]->id?>" class="vergroten rounded">+</a>
			</div>
		</div>
	<?php }?>
	</div>
</div>

<script>
var list = {'chip_id': '<?php echo Session::get('chip_id')?>', 'kosten': '0', 'pictures': []};
var prijs = 2;

function updateKosten(){
	list.kosten = list.pictures.length * prijs;
	$('#kosten').html(list.kosten.toFixed(2));
}

function hideBoughtPictures(){
	for(var i=0; i<list.length; i++){
		$('.border').parent().remove();
	}
}

$('.picture').click(function(){
	$(this).children('.overlay').show();
});

	
	$(this).parent().parent().children('img').toggleClass('border');
	
	updateKosten();
});

$('#kopen').click(function(){
	if(list.pictures.length == 0){
		alert("Je hebt nog geen foto's toegevoegd om te kopen");
	}
	else if(list.kosten > <?php echo $chip->credit?>){
		alert("Je hebt te weinig saldo om te kopen");
	}
	else{
		$.post("<?php echo URL?>ajax/buy_pictures.php", list, function(){
			window.location = '<?php echo URL?>fotoservice';
			});
	}
	
});
</script>